<template>
  <div>

    <div class="uinfo3">
      <div class="uinfo">
        <div class="realHead">
          <img class="headimg" v-if="realHead != '-'" :src="realHead" @click="showImg()"/>
        </div>
        <div class="realInfo">
          <div class="r1"><img class="rrs" src="/static/images/name1.png"/> {{realName}}</div>
          <div class="r1"><img class="rrs" src="/static/images/sex.png"/> {{sex}}</div>
          <div class="r1"><img class="rrs" src="/static/images/age.png"/> {{age}}</div>
          <div class="r1"><img class="rrs" src="/static/images/mobile.png"/> {{mobile}}</div>
          <div class="r1"><img class="rrs" src="/static/images/addr.png"/> {{addr}}**</div>
          <div class="r1"><img class="rrs" src="/static/images/police.png"/> {{origin}}</div>
        </div>
      </div>
    </div>
    


    <div class="uinfo3">
      <div class="uinfo2">
        <div class="rec">
          <img class="rrs" src="/static/images/da.png"/>
          {{recordText}}
          <img class="rrs1" src="/static/images/sxx.png" @click="getReports('1')"/>
        </div>
        <div class="recInfo">
          <div class="reportcls"  v-for="(report, index) in reports"  :key="index">
            <div class="bgc">
              <div class="repname">
                {{report.reportUserName}}
              </div>
              <div class="repcontent">
                {{ report.reportContent }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="bom">
        
    </div>


    <div class="butcls" @click="gopage('/pages/advoice/main?fromUserId=' + userId)">
      我要吐槽
    </div>
      
  </div>
</template>

<script>
import card from '@/components/card'
import { requestPost } from '@/utils/index'

export default {
  components: {
    card
  },
  data () {
    return {
      userId: '-1',
      recordId: '-1',
      realName: '-',
      age: 0,
      sex: '-',
      mobile: '-',
      addr: '-',
      origin: '',
      recordText: '用户评价',
      realHead: '-',
      reports: [],
      pageSize: 1,
      limit: 15
    }
  },
  onShow () {
    this.userId = this.$root.$mp.query.fromUserId
    this.recordId = this.$root.$mp.query.recordId
    this.realName = '飞科剃须刀'
    this.age = '18岁以上使用'
    this.sex = '男用'
    this.mobile = '--'
    this.origin = '京东商城'
    this.addr = '创意产业园'
    this.realHead = '/static/images/txd.png'
    this.reports = [{
      reportUserName: '王*云',
      reportContent: '这个商品质量不好，推荐大家不要购买'
    }]
    if (this.userId === '-1' && mpvue.getStorageSync('co')) {
      this.realName = '王初易'
      this.age = '1979年出生'
      this.sex = '男'
      this.mobile = '156*****298'
      this.origin = '数据已鉴定'
      this.addr = '河北省石家庄'
      this.recordText = '品行记录'
      this.realHead = 'https://hehe-1253111109.cos.ap-guangzhou.myqcloud.com/slt2.png'
      this.reports = [{
        reportUserName: '楼*一',
        reportContent: '照骗，核查后才发现，他探探上的照片是假的，这个真人照片又老又丑'
      },
      {
        reportUserName: '黄*丽',
        reportContent: '他一开始给我假名字和假授权码是查不到信息的，还找理由说网上不方便透漏真名，要不是我坚持让他给我授权码和真名，我都不知道他这么老。我不答应见面他就开始爆粗口，一点素质都没有，屌丝一个，那么多人举报他怎么可能跟他见面，想太多。'
      },
      {
        reportUserName: '张*源',
        reportContent: '骗我加微信后，拉我进各种群，推销什么的都有，大家不要上当'
      },
      {
        reportUserName: '牛*庆',
        reportContent: '这个网友在聊天过程中老是发裸照，猥琐，我让他给我授权码看看他一开始还不愿意，最后他可能觉得我不理他了，他就发给我了，一查发现他这么老，还装嫩骗小女孩，人渣。'
      }]
    } else {
      this.getRecordInfo()
      this.getReports('1')
    }
  },
  onReachBottom () {
    this.pageSize = this.pageSize + 1
    this.getReports('0')
  },
  onUnload () {
    this.realName = '--'
    this.age = 0
    this.sex = '--'
    this.mobile = '--'
    this.addr = '--'
    this.realHead = ''
    this.reports = []
    this.pageSize = 1
    // wx.clearStorageSync()
    // mpvue.removeStorageSync('token')
  },
  methods: {
    gopage (pathstr) {
      wx.navigateTo({
        url: pathstr
      })
    },
    showImg () {
      wx.previewImage({
        current: this.realHead, // 当前显示图片的http链接
        urls: [this.realHead] // 需要预览的图片http链接列表
      })
    },
    getRecordInfo () {
      if (this.recordId === '-1') {
        return
      }
      console.log(this.recordId)
      var data = {
        'id': this.recordId,
        'token': mpvue.getStorageSync('token')
      }
      var that = this
      requestPost(mpvue.getStorageSync('requestUrl') + '/miniprogram/getRecordInfo', data, 'POST').then(function (value) {
        if (value.code === 0) {
          that.realName = value.data.realName
          that.age = value.data.age + '年出生'
          that.sex = value.data.sex
          that.mobile = value.data.mobile
          that.realHead = value.data.realHead
          that.addr = value.data.addr
          that.origin = '数据已鉴定'
        }
      }, function (value) {
        console.log(value)
      })
    },
    getReports (isflush) {
      if (this.userId === '-1') {
        return
      }
      // wx.showLoading({
      //   title: '',
      //   mask: true
      // })
      if (isflush === '1') {
        this.pageSize = 1
      }
      var data = {
        'beReportUserId': this.userId,
        'page': this.pageSize,
        'limit': this.limit,
        'token': mpvue.getStorageSync('token')
      }
      var that = this
      requestPost(mpvue.getStorageSync('requestUrl') + '/miniprogram/getReports', data, 'POST').then(function (value) {
        // wx.hideLoading()
        if (value.code === 0) {
          if (value.data.length === 0) {
            wx.showToast({
              title: '暂无品行记录',
              icon: 'none',
              duration: 1500,
              mask: false
            })
            return
          }
          if (isflush === '1') {
            // console.log('isflushhhhhhh')
            that.reports = []
          }
          for (var ele of value.data) {
            that.reports.push(ele)
          }
        } else {
          wx.showToast({
            title: value.message,
            icon: 'none',
            duration: 1500,
            mask: false
          })
        }
      }, function (value) {
        // wx.hideLoading()
        console.log(value)
      })
    }
  }
}
</script>

<style scoped>
.uinfo{
  width: 90%;
  float: center;
  margin-top:10px;
  border:0px solid red;
  margin: 0 auto;
}

.realHead{
  width: 40%;
  margin-top:10px;
  border: 0px solid red;
  float: left;
  border-radius: 25%;
}
.realInfo{
  margin-top:10px;
  width: 54%;
  float: right;
}
.r1{
  margin-top: 10px;
}
.headimg{
  width: 100%;
  height: 200px;
}
.uinfo3{
  width: 100%;
  float: left;
}
.uinfo2{
  width: 90%;
  float: center;
  margin: 0 auto;
}
.rec{
  width: 100%;
  color: #aaaaaa;
  font-size: 20px;
  margin-top: 10px;
}
.bgc{
  width: 100%;
  border: 2px solid #f8f8f8;
  background-color: #ffffff;

  float: left;
  margin-top:10px;
  padding-top:5px;
  padding-bottom: 5px;
  border-radius: 5px 5px 5px 5px;
}
.repname{
  width: 18%;
  float: left;
  margin-right: 10px;
  font-size: 16px;
  text-align: center;
  color: #aaaaaa;
  border-radius: 12%;
}
.repcontent{
  width: 75%;
  float: right;
  font-size: 16px;
  color:#aaaaaa;
}
.butcls{
  width: 100%;
  float: left;
  background-color: #FEF55A;
  font-weight: bold;
  text-align: center;
  height: 50px;
  line-height: 50px;
  position: fixed;
  bottom: 0px;
}
.bom{
  width: 100%;
  height:150px;
  float: left;
}
.rrs{
  width:20px;
  height: 20px;
}
.rrs1{
  width:30px;
  height: 30px;
  float: right;
}
</style>
